<template>
    <div>
        <el-row style="margin-bottom: 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>官网导航</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage == 1">导航列表</el-breadcrumb-item>
                <el-breadcrumb-item v-if="showPage == 2">修改导航</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>

        <!-- 表格 -->
        <el-row v-show="showPage == 1">
            <el-table
                :data="table.tableData"
                border
                stripe
                style="width: 100%"
                size="small"
                :highlight-current-row="true"
                ref="multipleTable"
            >
                <el-table-column
                    label="编号"
                    prop="id"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    label="名称"
                    prop="name"
                    min-width="150"
                ></el-table-column>
                <el-table-column
                    label="地址"
                    prop="url"
                    min-width="150"
                ></el-table-column>
               
                <el-table-column label="操作" min-width="180">
                    <template slot-scope="scope">
                        <template>
                            <el-button class="my-detail-button" type="text" @click="modify(scope.row)">修改</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <!-- 修改 -->
        <el-row v-show='showPage==2'>
            <el-row>
                <el-col :span='3'>
                    <el-button type="primary" size="small" @click='addBack'>返回列表</el-button>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-form style="margin-top:10px;" label-position='right' label-width='80px' :model='addForm'
                ref='addForm' size='small' :rules='addForm.rules'>
                    <el-form-item label="编号">
                        <el-input :disabled='addForm.isDisable' style="width:200px;" v-model="addForm.id"/>
                    </el-form-item>
                    <el-form-item label="导航名称" prop="name">
                        <el-input style="width:200px;" v-model="addForm.name" placeholder="请输入导航名称"></el-input>
                    </el-form-item>
                    <el-form-item label="导航地址" prop="url">
                        <el-input :disabled='addForm.isDisable' style="width:200px;" v-model="addForm.url" placeholder="请输入导航地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('addForm')">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-row>       
    </div>
</template>
<script>
export default {
    data() {
        return {
            showPage: 1,
            table: {
                tableData: [],
                currentPage: 1,
                pageSize: 100,
                rowCount: 0,
            },
            addForm: {
                id: '',
                name: '',
                url: '',
                isDisable: true,
                rules: {
                    name: [
                        { required: true, message: "请输入导航名称", trigger: "blur" },
                        {
                            min: 2,
                            max: 10,
                            message: "长度2-10之间"
                        }
                    ]
                }
            }
        };
    },
    methods: {
        getTableData(){
            let p = {};
            let url = '/api/nav/list';
            this.$http.fetch(url, p)
            .then(res => {
                this.table.tableData = res.data.rows;
                this.table.rowCount = res.data.total;
            })
        },

        modify(row){
            this.addForm.id = row.id;
            this.addForm.name = row.name;
            this.addForm.url = row.url;
            this.$refs['addForm'].clearValidate();
            this.showPage = 2;
        },
        submitForm(formName){
            this.$refs[formName].validate((valid)=>{
                if(valid){
                    let p = {};
                    let url = '/api/nav/modify';
                    p.id = this.addForm.id;
                    p.name = this.addForm.name;
                    p.url = this.addForm.url;

                    this.$http.fetch(url, p)
                    .then(res=>{
                        this.getTableData();
                        this.showPage = 1;
                    })
                }
            });
        },
        addBack(){
            this.showPage = 1;
        },
    },
    mounted() {
        this.getTableData();
    },
};
</script>

<style scoped>
/* .my-detail-button{
    padding: 0px !important;
} */
</style>